<template>
  <div>
    <div>
      <Dome ref="domeRef" :level="0" :nav-data="navData" title="主菜单" />
    </div>
    <button class="hamburger" @click="handleUpdateposition">
      <div class="hamburger__line"></div>
      <div class="hamburger__line"></div>
      <div class="hamburger__line"></div>
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import Dome from './dome.vue';

const navData = [
  {
    name: '首页',
    children: [],
  },
  {
    name: '产品中心',
    children: [
      {
        name: '手机',
        children: [
          {
            name: '旗舰系列',
            children: [
              { name: '旗舰系列1', children: [] },
              { name: '旗舰系列2', children: [] },
              { name: '旗舰系列3', children: [] },
              { name: '旗舰系列4', children: [] },
              { name: '旗舰系列5', children: [] },
              { name: '旗舰系列6', children: [] },
              { name: '旗舰系列7', children: [] },
            ],
          },
          { name: '青春版', children: [] },
        ],
      },
      {
        name: '电脑',
        children: [
          { name: '笔记本', children: [] },
          { name: '台式机', children: [] },
        ],
      },
    ],
  },
  {
    name: '服务支持',
    children: [
      { name: '售后服务', children: [] },
      { name: '在线客服', children: [] },
    ],
  },
];
const domeRef = ref<any>(null);
const handleUpdateposition = () => {
  setTimeout(() => {
    domeRef.value.Updateposition();
  }, 0);
};
</script>
<style scoped lang="scss">
.hamburger {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: transparent;
}

.hamburger.hidden {
  display: none;
}

.hamburger__line {
  width: 2rem;
  height: 0.25rem;
  margin: 0.25rem 0;
  background: rgb(203 213 225);
  transition: all 0.3s ease-out;
}

.hamburger:hover .hamburger__line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger:hover .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger:hover .hamburger__line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
</style>
